/** ************************* overwrite ****************/
* {
    margin: 0;
    padding: 0;
}

img {
    //image-rendering: pixelated;
}

html,
body {
    // width: 8.28rem;
    // max-width: 828px;
    margin: 0 auto;
    height: 100vh;
    box-sizing: border-box;
}

body {
    font-size: 30px;
    font-family: "Noto Sans SC";
    font-weight: 400;
    // font-size: .32rem;
    // background: #9E9FA3;
}

.doTouch {
    touch-action: none;
}

/* 颜色值 */
$white: #ffffff;
$black: #000000;
$dark-black: #22262F;
// $grey:#868C9A;
$grey: #f3f3f3;
$dark-grey: #868C9A;
$light-grey: #C8CAD2;
$border-grey: #E5E7ED;
$blue: #2C78F8;
$light-blue: #1199FA;
$red: #F6465D;
$green: #2EBD85;
$purple: #9A4DFD;

// overwrite vant

.mining-pledge {
    .van-tabs__wrap {
        height: 145px !important;

        .van-tab {
            &:first-child {
                border-right: 1px solid $border-grey;
            }
        }
    }
}

em {
    font-style: normal;
}


/***************** global use framework *****************/

/* flex */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-stretch {
    align-items: stretch;
}

.flex-1 {
    flex: 1
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.align-center {
    align-content: center;
}

/* display */
.block {
    display: block;
}

/* position */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.z-10 {
    z-index: 10;
}

/* font */
.font-bold {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}

/* text */
.text-center {
    text-align: center;
}

.text-left {
    text-align: start;
}

.text-right {
    text-align: end;
}

/* padding margin font */
@for $i from 0 through 375 {

    // font-weight
    @if $i >=0 and $i <=9 {
        .font-#{$i * 100} {
            font-weight: #{$i * 100};
        }

        @if $i ==1 {
            .border {
                border-width: #{$i}px;
            }

            .border-l {
                border-left-width: #{$i}px;
            }

            .border-r {
                border-right-width: #{$i}px;
            }

            .border-t {
                border-top-width: #{$i}px;
            }

            .border-b {
                border-bottom-width: #{$i}px;
            }
        }

        .border-t-#{$i} {
            border-top-width: #{i}px;
        }

        .border-b-#{$i} {
            border-bottom-width: #{i}px;
        }

        .border-l-#{$i} {
            border-left-width: #{i}px;
        }

        .border-r-#{$i} {
            border-right-width: #{i}px;
        }
    }

    // font-size
    @if $i >=10 and $i <=100 {
        .font-#{$i} {
            font-size: #{$i}px
        }
    }

    // margin
    .m-#{$i} {
        margin: #{$i}px
    }

    .ml-#{$i} {
        margin-left: #{$i}px
    }

    .mr-#{$i} {
        margin-right: #{$i}px
    }

    .mt-#{$i} {
        margin-top: #{$i}px
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px
    }

    .mx-#{$i} {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
    }

    .my-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
    }

    // padding
    .p-#{$i} {
        padding: #{$i}px
    }

    .pl-#{$i} {
        padding-left: #{$i}px
    }

    .pr-#{$i} {
        padding-right: #{$i}px
    }

    .pt-#{$i} {
        padding-top: #{$i}px
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px
    }

    .px-#{$i} {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
    }

    .py-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
    }

    // width
    .w-#{$i} {
        width: #{$i}px
    }

    // height
    .h-#{$i} {
        height: #{$i}px
    }

    //line-height
    .lh-#{$i} {
        line-height: #{$i}px
    }

    // position
    .left-#{$i} {
        left: #{$i}px
    }

    .right-#{$i} {
        right: #{$i}px
    }

    .top-#{$i} {
        top: #{$i}px
    }

    .bottom-#{$i} {
        bottom: #{$i}px
    }
}

.w-half {
    width: 50%;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-1000 {
    height: 1000px;
}

/* background */
.bg-white {
    background: $white;
}

.bg-black {
    background: $black;
}

.bg-grey {
    background: $grey;
}

.bg-dark-grey {
    background: $dark-grey
}

;

.bg-light-grey {
    background: $light-grey;
}

.bg-red {
    background: $red;
}

.bg-green {
    background: $green;
}

.bg-blue {
    background: $blue;
}

.bg-dark-blue {
    background: #6C52E6;
}

.bg-light-blue {
    background: #7F81FD;
}

.bg-none {
    background: none;
}

.bg-grey-f3 {
    background: $grey;
}


/* color */
.text-white {
    color: $white;
}

.text-black {
    color: $black;
}

.text-dark-black {
    color: $dark-black;
}

.text-grey {
    color: $dark-grey;
}

.text-blue {
    color: $blue;
}

.text-light-blue {
    color: $light-blue;
}

.text-red {
    color: $red;
}

.text-green {
    color: $green;
}

.text-purple {
    color: $purple;
}

/* border-color */
.border-white {
    border-color: $white;
}

.border-black {
    border-color: $black;
}

.border-grey {
    border-color: $grey;
}

.border-light-grey {
    border-color: $light-grey;
}

.border-red {
    border-color: $red;
}

.border-green {
    border-color: $green;
}

.border-light-blue {
    border-color: $light-blue;
}

.border-solid {
    border-style: solid;
    border-color: $border-grey;
}

.border-b-grey {
    border-bottom: 1px solid $border-grey;
}

.border-r-grey {
    border-right: 1px solid $border-grey;
}

.border-t-grey {
    border-top: 1px solid $border-grey;
}

.border-solid-blue {
    border: 1px solid $blue;
}

.border-solid-grey {
    border: 1px solid $grey;
}

.border-solid-dark-grey {
    border: 1px solid $dark-grey;
}

.border-solid-light-grey {
    border: 1px solid $border-grey;
}

.border-b-dashed-black {
    border-bottom: 1px dashed #000;
}

// .border-b-grey { border-bottom: 1px solid #E5E7ED;}
// .border-r-grey { border-right: 1px solid #E5E7ED;}
.border-none {
    border: none;
    outline: none;
}

/* border radius */
.rounded-sm {
    border-radius: 2px;
}

.rounded {
    border-radius: 4px;
}

.rounded-md {
    border-radius: 6px;
}

.rounded-lg {
    border-radius: 8px;
}

.rounded-xl {
    border-radius: 12px;
}

.rounded-2xl {
    border-radius: 16px;
}

.rounded-full {
    border-radius: 9999px;
}

/** box-sizing */
.box-border {
    box-sizing: border-box;
}

/* border */
.border {
    border-width: 1px;
}

/* 解决重复点击报错的问题 */
// * {
//     //touch-action: pan-y;
// }
/*常用*/
.m-t10 {
    margin-top: 10px;
}

.m-t20 {
    margin-top: 20px;
}

.m-b10 {
    margin-bottom: 6px;
}

.van-nav-bar--fixed {
    z-index: 1999;
}

.h8 {
    height: 8px;
}

.h20 {
    height: 20px;
}

.h44 {
    height: 44px;
}

.h90 {
    height: 90px;
}

.h60 {
    height: 60px;
}

.h46 {
    height: 46px;
}

.h56 {
    height: 56px;
}

.h100 {
    height: 100px;
}

.h150 {
    height: 150px;
}

.name,
.title,
.shop-description-text,
.describe,
.product-name {
    word-break: break-word;
}

.servece_box {
    position: fixed;
    right: 10px;
    bottom: 10%;
    // transform: translateY(-50%);
    z-index: 999;
    width: 46px;
    height: 46px;
    background: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    img {
        width: 24.25px;
        height: 26.91px;
    }
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
}

.nowrap3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
}

.loading_box {
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;

    .van-loading {
        color: #0094ff;
    }
}

.van-list__finished-text {
    display: none !important;
}

// 骨架
.skeleton {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 !important;
}

.big_picture {

    .van-skeleton__row {
        width: 100% !important;
        height: 160px;
        border-radius: 10px;
    }
}

.list_skeleton {
    transform: translateY(-25px);

    .van-skeleton__content {
        display: flex;
        // flex-wrap: wrap;
        // justify-content: space-around;
        align-items: flex-end;
        overflow-y: scroll;
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .van-skeleton__row {
            flex: 0 0 92px;
            width: 92px !important;
            height: 88px;
            border-radius: 4px;
            margin-right: 10px;
        }
    }
}

.product_skeleton {
    .van-skeleton__content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;

        .van-skeleton__row {
            width: 165px !important;
            height: 279px;
            border-radius: 4px;
        }
    }
}

.commodity_skeleton {
    .van-skeleton__content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;

        .van-skeleton__row {
            width: 165px !important;
            height: 247px;
            border-radius: 4px;
        }
    }
}

.newest_skeleton {
    .van-skeleton__content {
        .van-skeleton__row {
            width: 100% !important;
            height: 156px;
            border-radius: 4px;
        }
    }
}

.shop_skeleton {
    .van-skeleton__content {
        .van-skeleton__row {
            width: 100% !important;
            height: 135px;
            border-radius: 4px;
        }
    }
}

.avatar_picture {
    .van-skeleton__content {
        .van-skeleton__row {
            width: 60px !important;
            height: 60px;
            border-radius: 50%;
        }
    }
}

.shop_skeleton {
    .van-skeleton__content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;

        .van-skeleton__row {
            width: 170px !important;
            height: 247px;
            border-radius: 4px;
        }
    }
}

.swiper_picture {
    .van-skeleton__content {

        .van-skeleton__row {
            width: 100% !important;
            height: 262px;
            border-radius: 4px;
        }
    }
}

@supports (bottom: env(safe-area-inset-bottom)) {

    body,
    .navbar,
    .buy-bottom-fiexd {
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: constant(safe-area-inset-bottom);
    }

    .msg_bottom {
        min-height: 49px;
        padding: 10px;
    }

    .app_content {
        height: calc(100vh - 200px) !important;
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    body,
    .navbar,
    .buy-bottom-fiexd {
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: constant(safe-area-inset-bottom);
    }

    .msg_bottom {
        min-height: 49px;
        padding: 10px;
    }

    .app_content {
        height: calc(100vh - 200px) !important;
    }
}

/* 适配安卓设备的底部安全区域 */
@supports (padding-bottom: constant(safe-area-inset-bottom)) {

    body,
    .navbar,
    .buy-bottom-fiexd {
        padding-bottom: constant(safe-area-inset-bottom);
    }

    .msg_bottom {
        min-height: 49px;
        padding: 10px;
    }

    .app_content {
        height: calc(100vh - 180px) !important;
    }
}

@supports (top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-top: constant(safe-area-inset-top);
    }

    .filter-div {
        top: calc(96px + env(safe-area-inset-top)) !important;
        top: calc(96px + constant(safe-area-inset-top)) !important;
    }

    .class_filter_div {
        top: calc(40px + env(safe-area-inset-top)) !important;
        top: calc(40px + constant(safe-area-inset-top)) !important;
    }

    .van-notify,
    .commodity_header {
        margin-top: env(safe-area-inset-top);
        margin-top: constant(safe-area-inset-top);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-top: constant(safe-area-inset-top);
    }

    .filter-div {
        top: calc(96px + env(safe-area-inset-top)) !important;
        top: calc(96px + constant(safe-area-inset-top)) !important;
    }

    .class_filter_div {
        top: calc(40px + env(safe-area-inset-top)) !important;
        top: calc(40px + constant(safe-area-inset-top)) !important;
    }

    .van-notify,
    .commodity_header {
        margin-top: env(safe-area-inset-top);
        margin-top: constant(safe-area-inset-top);
    }
}



/* 适配安卓设备的顶部安全区域 */
@supports (padding-top: constant(safe-area-inset-top)) {
    body {
        padding-top: constant(safe-area-inset-top);
    }

    .filter-div {
        top: calc(96px + env(safe-area-inset-top)) !important;
        top: calc(96px + constant(safe-area-inset-top)) !important;
    }

    .class_filter_div {
        top: calc(40px + env(safe-area-inset-top)) !important;
        top: calc(40px + constant(safe-area-inset-top)) !important;
    }

    .van-notify,
    .commodity_header {
        margin-top: env(safe-area-inset-top);
        margin-top: constant(safe-area-inset-top);
    }
}
